<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        // 对象object ：字符串—值
        // map方法 : 翻译:map : 值 - 值 (类似对象)
        // 1.创建一个map
        // let map = new Map([['name','张三'],['age','20'],['height','178cm']]);
        // console.log(map);
        
        
        // size属性返回 Map 结构的成员总数。
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // console.log(map.size);

        // set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。set方法返回的是当前的Map对象，因此可以采用链式写法。
        // let map = new Map();
        // map.set('myname','张三');
        // map.set({age:20},'hello');
        // console.log(map);
        
        // get方法读取key对应的键值，如果找不到key，返回undefined。
        //     let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        //    let res =  map.get("age");
        //    console.log(res); // 20

        // has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。
        //     let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        //   var res =   map.has("name");
        //   console.log(res); // true

        // delete方法删除某个键，返回true。如果删除失败，返回false。
        // map.delete(键名);
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // map.delete("name");
        // console.log(map);

        // clear方法清除所有成员，没有返回值。
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // map.clear();
        // console.log(map);

        // keys()：返回键名的遍历器。
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // let keys =  map.keys();
        // console.log(keys); // 键名

        // values()：返回键值的遍历器。
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // let values = map.values();
        // console.log(values);  // 键值

        // entries()：返回所有成员的遍历器。
        // let map = new Map([["name","张三"],["age",20],["height","178cm"]]);
        // let entries = map.entries();
        // console.log(entries);  // |> MapIterotor{"name"=>"张三","age"=>20,"height"=>"178cm"}
        // forEach()：遍历 Map 的所有成员。

        // 把元素作为键名
        // let lis = document.querySelectorAll('li');
        
        // let obj = {
        //     name:'zhang',
        //     age:20
            
        // };

        // obj[lis[0]] = 'red';
        // obj[lis[1]] = 'blue';
        // obj[lis[2]] = 'yellow';
        // console.log(obj);

        // for(var key in obj){
        //     console.log(key);
        //     console.log(obj[key]);
        // }
        // let map = new Map();
        // // set设置li每一项
        // map.set(lis[0],'red');
        // map.set(lis[1],'blue');
        // map.set(lis[2],'yellow');
        // console.log(map);
        // // 循环map里面的每一项,key是每一项,item是键值
        // map.forEach((item,key)=>{
        //     console.log(item);
        //     console.log(key);
        //     key.style.color = item ;
        // })




    </script>
</body>
</html>